<template>
  <div class="task-proportion">
    <div class="title"></div>
    <div class="main">
      <DoughnutChartCustom
          :echartsData="echartsData"
          :color="color"
          :showLabel="false"
          :legendGap="10"
          :legendPadding="[14, 8]"
          :borderColor="['rgba(76, 178, 255, 0.7)', 'rgba(18, 62, 96, 0.3)', 'rgba(76, 178, 255, 0.8)']"
      />
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';
import DoughnutChartCustom from '@/components/echarts/doughnutChartCustom.vue';

const currentTab = ref('1');

const tabList = [
  { name: '1', label: '近30天' },
  { name: '2', label: '本年' },
];
const color = [
    ['rgba(0, 130, 149, 1)', 'rgba(27, 200, 226, 1)'],
    ['rgba(180, 150, 0, 1)', 'rgba(237, 185, 33, 1)'],
    ['rgba(32, 92, 227, 1)', 'rgba(65, 121, 247, 1)'],
    ['rgba(0, 88, 170, 1)', 'rgba(13, 131, 229, 1)'],
    ['rgba(173, 92, 0, 1)', 'rgba(255, 151, 41, 1)'],
    ['rgba(135, 154, 175, 1)', 'rgba(188, 209, 231, 1)'],
    ['rgba(0, 160, 86, 1)', 'rgba(0, 160, 86, 1)'],
    ['rgba(75, 92, 201, 1)', 'rgba(129, 145, 243, 1)'],
    ['rgba(206, 47, 167, 1)', 'rgba(210, 0, 208, 1)']
]
const echartsData = [
  {
    name: '合肥市消防救援支队',
    value: 15,
  },
  {
    name: '蜀山区消防救援大队',
    value: 18,
  },
  {
    name: '庐阳区消防救援人队',
    value: 21,
  },
  {
    name: '瑶海区消防救援大队',
    value: 25,
  },
  {
    name: '包河区消防救援大队',
    value: 29,
  },
  {
    name: '巢湖市消防救援大队',
    value: 32,
  },
  {
    name: '长丰县消防救援大队',
    value: 35,
  },
  {
    name: '肥西县消防救援大队',
    value: 38,
  },
  {
    name: '肥东县消防救援大队',
    value: 40,
  },
];

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'taskProportion' });
</script>

<style scoped lang="scss">
.task-proportion {
  @apply relative w-full;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[488px] mt-[12px];
  }

  .tab-box {
    @apply absolute right-0 top-[8px];
  }
}
</style>
